<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="员工编号">
      </el-table-column>
      <!--    <el-table-column-->
      <!--        prop="headImg"-->
      <!--        label="员工头像">-->
      <!--      <template slot-scope="scope">-->
      <!--        <el-avatar shape="square" :size="50" :src="scope.row.headImg"></el-avatar>-->
      <!--      </template>-->
      <!--    </el-table-column>-->
      <el-table-column
          prop="name"
          label="员工姓名">
      </el-table-column>
      <el-table-column
          prop="age"
          label="员工年龄">
      </el-table-column>
      <el-table-column
          prop="job"
          label="员工岗位">
      </el-table-column>
      <el-table-column
          prop="salary"
          label="员工工资">
      </el-table-column>
      <el-table-column
          prop="entryDate"
          label="入职时间"
          width="150">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="300">
        <template slot-scope="scope">
          <el-button @click="dialogAdd = true" size="small" plain>添加</el-button>
          <el-button @click="updateClick(scope.row)" size="small" plain>修改</el-button>
          <el-button @click="deleteClick(scope.row)" size="small" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination-all ref="pagination"/>
    <!--修改弹窗-->
    <el-dialog
        title="修改员工信息"
        :visible.sync="dialogUpdate"
        width="30%"
        :before-close="handleClose">
      <el-form ref="form" :model="updateForm" label-width="80px">
        <el-form-item label="员工姓名">
          <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="员工年龄">
          <el-input v-model="updateForm.age"></el-input>
        </el-form-item>
        <el-form-item label="员工岗位">
          <el-input v-model="updateForm.job"></el-input>
        </el-form-item>
        <el-form-item label="员工工资">
          <el-input v-model="updateForm.salary"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="updateForm.entryDate"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogUpdate = false">取 消</el-button>
          <el-button type="primary" @click="confirmUpdate">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--添加弹窗-->
    <el-dialog
        title="添加员工信息"
        :visible.sync="dialogAdd"
        width="30%"
        :before-close="handleClose">
      <el-form ref="form" :model="addForm" label-width="80px">
        <el-form-item label="员工姓名">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="员工年龄">
          <el-input v-model="addForm.age"></el-input>
        </el-form-item>
        <el-form-item label="员工岗位">
          <el-input v-model="addForm.job"></el-input>
        </el-form-item>
        <el-form-item label="员工工资">
          <el-input v-model="addForm.salary"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="addForm.entryDate"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogAdd = false; addForm = {}">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import PaginationAll from "@/components/PaginationAll";

export default {
  data() {
    return {
      tableData: [],
      pageInfo: {},
      addForm: {},
      updateForm: {},
      dialogAdd: false,
      dialogUpdate: false,
    }
  },
  created() {
    this.initTable();
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.addForm = {};
            this.updateForm = {};
          })
          .catch(_ => {
          });
    },
    deleteClick(row) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("http://localhost:8888/emp/deleteById?id=" + row.id).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            console.log(res.data.msg);
            this.initTableChild(this.pageInfo);
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
            console.log(res.data.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    updateClick(row) {
      this.dialogUpdate = true;
      this.updateForm = row;
    },
    confirmUpdate() {
      this.$http.post("http://localhost:8888/emp/updateById", this.updateForm).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          console.log(res.data.msg);
          this.initTableChild(this.pageInfo);
        } else {
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
          console.log(res.data.msg);
        }
        this.dialogUpdate = false;
      })
    },
    confirmAdd() {
      this.$http.post("http://localhost:8888/emp/insert", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          console.log(res.data.msg);
          this.initTableChild(this.pageInfo);
        } else {
          this.$message({
            type: 'error',
            message: '添加失败!'
          });
          console.log(res.data.msg);
        }
        this.dialogAdd = false;
      })
    },
    initTable() {
      this.$http.get("http://localhost:8888/emp/selectAll").then((res) => {
        if (res.data.code == 200) {
          this.$refs.pagination.total = res.data.data.total;
          console.log(res.data);
          this.tableData = res.data.data.records;
        } else {
          console.log(res.data.msg);
        }
      })
    },
    initTableChild(pageData) {
      this.pageInfo = pageData;
      this.$http.get("http://localhost:8888/emp/selectAll?currentPage=" + pageData.currentPage + "&pageSize=" + pageData.pageSize).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
        } else {
          console.log(res.data.msg);
        }
      });

    },
  },
  name: "Emp",
  components: {
    PaginationAll
  },
}
</script>